<!--
 * @Author: levi7754 levi7754@163.com
 * @Date: 2025-04-23 15:32:04
 * @LastEditors: levi7754 levi7754@163.com
 * @LastEditTime: 2025-07-07 09:55:26
 * @FilePath: \ruoyi-mall-uniapp\src\sheep\components\s-tabbar\s-tabbar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="u-page__item" v-if="tabbar?.list.length > 0">
    <su-tabbar
      :value="path"
      :fixed="true"
      :placeholder="true"
      :safeAreaInsetBottom="true"
      :inactiveColor="tabbar.inactiveColor"
      :activeColor="tabbar.activeColor"
      :midTabBar="tabbar.mode === 2"
      :customStyle="tabbarStyle"
    >
      <su-tabbar-item
        v-for="(item, index) in tabbar.list"
        :key="item.text"
        :text="item.text"
        :name="item.url"
        :badge="item.badge"
        :isCenter="getTabbarCenter(index)"
        :centerImage="sheep.$url.cdn(item.inactiveIcon)"
        @tap="sheep.$router.go(item.url)"
      >
        <template v-slot:active-icon>
          <image class="u-page__item__slot-icon" :src="sheep.$url.static(item.activeIcon)"></image>
        </template>
        <template v-slot:inactive-icon>
          <image class="u-page__item__slot-icon" :src="sheep.$url.static(item.inactiveIcon)"></image>
        </template>
      </su-tabbar-item>
    </su-tabbar>
  </view>
</template>

<script setup>
  import { computed, unref, ref, watch, nextTick } from 'vue';
  import { useI18n } from 'vue-i18n';
  import { onLoad } from '@dcloudio/uni-app';
  import sheep from '@/sheep';

  const tabbar = ref({})
  const role = 1
  let badge = 0

  const cart = computed(() => { return sheep.$store('cart').list;});

  const customer = computed(() => sheep.$store('customer').current);
  const placeOrder = computed(() => sheep.$store('customer').placeOrder);
  const userInfo = computed(() => sheep.$store('user').userInfo);

  watch(
    () => cart.value,
    nv => {
      const idx = tabbar.value.list.findIndex(f => f.code === "cart")
      if (idx !== -1) {
        tabbar.value.list[idx].badge = nv.length
        badge = nv.length
      }
    },
    { deep: true }
  )
  watch(() => customer.value,
		(nv) => {
      // nv.customer_name ? refactorLayout() : initTabbar()
		}
	)
  watch(() => placeOrder.value,
		(nv) => {
      // debugger
      // nv ? refactorLayout() : initTabbar()
		}
	)


  const { t } = useI18n()

  const tabbarStyle = computed(() => {
    const backgroundStyle = tabbar.value.background;
    if (backgroundStyle.type == 'color') return { background: backgroundStyle.bgColor };
    if (backgroundStyle.type == 'image')
      return {
        background: `url(${sheep.$url.cdn(
          backgroundStyle.bgImage,
        )}) no-repeat top center / 100% auto`,
      };
  });

  const getTabbarCenter = (index) => {
    if (unref(tabbar).mode !== 2) return false;
    return unref(tabbar).list % 2 > 0
      ? Math.ceil(unref(tabbar).list.length / 2) === index + 1
      : false;
  };

  const refactorLayout = () => {
    tabbar.value = {
      mode: 1,
      layout: 1,
      inactiveColor: "#8C8C8C",
      activeColor: "#EA0D2C",
      list: [
        { code: "product", inactiveIcon: "/static/tabbar/product.png", activeIcon: "/static/tabbar/product-active.png", url: "/pages/index/shop", text: t('tabbar.mall') },
        // { code: "cart", inactiveIcon: "/static/tabbar/car.png", activeIcon: "/static/tabbar/car-active.png", url: "/pages/index/cart", badge, text: t('tabbar.cart') },
        { code: "mine", inactiveIcon: "/static/tabbar/mine.png", activeIcon: "/static/tabbar/mine-active.png", url: "/pages/index/user", text: t('tabbar.about') }
      ],
      background: { type: "color", bgImage: "", bgColor: "#FFFFFF" }
    }
    nextTick(() => {
      console.log("tabbar")
    })
  }

  const initTabbar = () => {
    console.log("initTable")
    tabbar.value = {
      mode: 1,
      layout: 1,
      inactiveColor: "#8C8C8C",
      activeColor: "#EA0D2C",
      list: [
        { code: "home", inactiveIcon: "/static/tabbar/home.png", activeIcon: "/static/tabbar/home-active.png", url: "/pages/index/index", text: t('tabbar.home') },
        { code: "product", inactiveIcon: "/static/tabbar/product.png", activeIcon: "/static/tabbar/product-active.png", url: "/pages/index/shop", text: t('tabbar.items') },
        // { code: "cart", inactiveIcon: "/static/tabbar/car.png", activeIcon: "/static/tabbar/car-active.png", url: "/pages/index/cart", badge, text: t('tabbar.cart') },
        { code: "mine", inactiveIcon: "/static/tabbar/mine.png", activeIcon: "/static/tabbar/mine-active.png", url: "/pages/index/user", text: t('tabbar.about') }
      ],
      background: { type: "color", bgImage: "", bgColor: "#FFFFFF" }
    }
    // 销售员角色
    if (role === 1) {
      // const workbench = { inactiveIcon: "/static/tabbar/workbench-gray.png", activeIcon: "/static/tabbar/workbench.png", url: "/pages/workbench/index", text: t('tabbar.workbench') }
      const contact = { inactiveIcon: "/static/tabbar/contact.png", activeIcon: "/static/tabbar/contact-active.png", url: "/pages/index/contact", text: t('tabbar.contact') }
      tabbar.value.list.splice(1, 0, ...[contact])
    }
  }

  onLoad(() => {
    userInfo.accountType === "C" ? refactorLayout() : initTabbar()
    // customer.value?.customer_name ? refactorLayout() : initTabbar()
    // placeOrder.value ? refactorLayout() : initTabbar()
  })

  const props = defineProps({
    path: String,
    default: '',
  });
</script>

<style lang="scss">
  .u-page {
    padding: 0;

    &__item {
      &__title {
        color: var(--textSize);
        background-color: #fff;
        padding: 15px;
        font-size: 15px;

        &__slot-title {
          color: var(--textSize);
          font-size: 14px;
        }
      }

      &__slot-icon {
        width: 25px;
        height: 25px;
      }
    }
  }
</style>
